<template>
	<van-cell-group v-if="order">
		<van-cell v-if="order.ordersn">
			<div slot="title" class="flex">
				<span>订单编号</span>
				<span class="order_sn">{{order.ordersn}}</span>
			</div>
		</van-cell>
		<van-field class="user_info"
      v-model="userName"
      label="收件姓名"
      placeholder="收件人姓名"
      icon="edit"
      input-align="right"
      :readonly="canModify ? false : 'readonly'">
    </van-field>
		<van-field class="user_info"
      v-model="userMobile"
      label="收件电话"
      placeholder="收件人电话"
      icon="edit"
      input-align="right"
      :readonly="canModify ? false : 'readonly'">
    </van-field>
		<van-cell title="团长姓名" :value="order.shopName" />
		<van-cell title="团长电话" :value="order.shopMobile" />
		<van-cell title="自提点" :value="order.shopXiaoqu" />
		<van-cell title="详细地址" :value="order.shopAddress" />
	</van-cell-group>
</template>

<script>
import { USER_PROFILE } from "@/api/user";

export default {
  name: 'top-user-info',
  props: {
    order: Object
  },

  data() {
    return {
      userName: "",
      userMobile: "",
    }
  },

  computed: {
    canModify() {
      const user = this.getUser();
      return (user.id === this.order.mid);
    }
  },

  created() {
    this.userName = this.order.sname;
    this.userMobile = this.order.mobile;
    const user = this.getUser();

    //不是下单用户或者下单用户的团长
    if ((user.id !== this.order.mid) && (user.id !== this.order.tMid)) {
      this.userMobile = '******';
    }
  },

  methods: {
    onUserInfoChange() {
      this.$emit("userInfoChange", {
        name: this.userName,
        mobile: this.userMobile
      });
    }
  },

  components: {},

  watch: {
    userName() {
      this.onUserInfoChange();
    },

    userMobile() {
      this.onUserInfoChange();
    }
  }
}
</script>


<style lang="scss">
.user_info .van-cell__value {
	color:$red;
}
.order_sn {
	flex: 1;
	text-align: right;
}
</style>
